<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<title>跨游览器的颜色选择器</title>
		<script type="text/javascript">
	//用于生成颜色选择器的具体内容
var colorPickerHtml = function(){
    var  _hex = ['FF', 'CC', '99', '66', '33', '00'];
    var builder = [];
    // 呈现一个颜色格
    var _drawCell = function(builder, red, green, blue){
        builder.push('<td bgcolor="');
        builder.push('#' + red + green + blue);
        builder.push('" unselectable="on"></td>');
    };
    // 呈现一行颜色
    var _drawRow = function(builder, red, blue){
        builder.push('<tr>');
        for (var i = 0; i < 6; ++i) {
            _drawCell(builder, red, _hex[i], blue)
        }
        builder.push('</tr>');
    };
    // 呈现六个颜色区之一
    var _drawTable = function(builder, blue){
        builder.push('<table class="cell" unselectable="on">');
        for (var i = 0; i < 6; ++i) {
            _drawRow(builder, _hex[i], blue)
        }
        builder.push('</table>');
    };
    //开始创建
    builder.push('<table><tr>');
    for (var i = 0; i < 3; ++i) {
        builder.push('<td>');
        _drawTable(builder, _hex[i]);
        builder.push('</td>');
    }
    builder.push('</tr><tr>');
    for (var i = 3; i < 6; ++i) {
        builder.push('<td>');
        _drawTable(builder, _hex[i])
        builder.push('</td>');
    }
    builder.push('</tr></table>');
    builder.push('<table class="color_result">\n\
                   <tr>\n\
                     <td class="color_view"></td>\n\
                     <td class="color_code"></td>\n\
                   </tr>\n\
                 </table>');
    return builder.join('');
};
</script>
		<style type="text/css">
div#colorpicker table{border-collapse:collapse;margin:0;padding:0;}
div#colorpicker .cell td{height:12px;width:12px;}
.color_result{width:216px;}
.color_view{width:110px;height:25px;}
.color_code{text-align:center;font-weight:700;color:#666;font-size:16px;background:#eee;}
</style>
<script type="text/javascript">

var addEvent = (function () { 
    if (document.addEventListener) { 
        return function (el, type, fn) { 
            el.addEventListener(type, fn, false); 
        }; 
    } else { 
        return function (el, type, fn) { 
            el.attachEvent('on' + type, function () { 
                return fn.call(el, window.event); 
            }); 
        } 
    } 
})();

//事件源函数
var getTarget = function(event){
    event = event || window.event;
    var obj = event.srcElement ? event.srcElement : event.target;
    return obj
}

//用它给颜色选择器绑定mouseover事件
var bindMouseover = function(obj){
    addEvent(obj,'mouseover',function(e){
        var td = getTarget (e);
        var nn = td.nodeName.toLowerCase();
        if(nn == 'td'){
            //执行相关事件………………
        }
    });
}

var bindMouseover = function(obj){
    addEvent(obj,'mouseover',function(e){
        var td = getTarget(e),
        nn = td.nodeName.toLowerCase(),//IE会自动转换为大写
        colorView,
        colorCode;
        if(document.querySelector){
            colorView = obj.querySelector('td.color_view');
            colorCode = obj.querySelector('td.color_code');
        }else{
            colorView = getElementsByClassName('color_view',obj,'td')[0];
            colorCode = getElementsByClassName('color_code',obj,'td')[0];
        }
        if(nn == 'td'){
            colorView.style.backgroundColor = td.bgColor;
            colorCode.innerHTML = td.bgColor;
        }
    });
}

var bindClick = function(obj,id){
  addEvent(obj,'click',function(e){
        var td = getTarget(e),
        nn = td.nodeName.toLowerCase(),//IE会自动转换为大写
        textfield = document.getElementById(id);
        if(nn == 'td'){
            textfield.value = td.bgColor;
            obj.style.display = 'none';
        }
    });
 
}

window.onload = function(){
    var textfield = document.getElementById('color');
    var picker = document.createElement('div');
    picker.setAttribute("id","colorpicker");
    picker.innerHTML = colorPickerHtml();
    var body = document.getElementsByTagName("body")[0];
    body.insertBefore(picker,null);
    picker.style.display = 'none';
    bindMouseover(picker);
    bindClick(picker,"color");
    addEvent(textfield ,'focus',function(){
        textfield.style.position = 'relative';
        picker.style.position = 'absolute';
        picker.style.display = 'block';
        picker.style.left = textfield.offsetLeft + 'px';
        picker.style.top = (textfield.clientHeight + textfield.offsetTop)+ 'px';
    });
}

</script>
	</head>
	<body>
<form action="" method="post">
        <input type="text" value="点击弹出颜色选择器" id="color"/>
    </form>
	</body>
</html>